<template>
	<view class="warp">
		<view class="title">
			<text>
				希望有幸加入！
			</text>
		</view>
		<view class="form-warp">
			<u--form :model="regParams" :rules="rules" ref="regForm">
				<u-form-item prop="userName">
					<u--input class='regIput' placeholder="输入用户名" v-model="regParams.userName" border='bottom'>
					</u--input>
				</u-form-item>
				<u-form-item prop="phone">
					<u--input class='regIput' placeholder="输入手机号" type='number' v-model="regParams.phone"
						border='bottom'>
					</u--input>
				</u-form-item>
				<u-form-item prop="password">
					<u--input class='regIput' placeholder="设置登录密码" :type='passType' v-model="regParams.password"
						border='bottom'>
						<template slot="suffix">
							<view class="" @click="eyeIcon">
								<u-icon :name="showPassword" size='30px'></u-icon>
							</view>
						</template>
					</u--input>
				</u-form-item>
				<u-form-item prop="code">
					<u--input class='regIput' type='number' placeholder="输入验证码" v-model="regParams.code"
						border='bottom'>
						<template slot="suffix">
							<view class="getCode" @tap="getCode" >
								{{tips}}
							</view>
						</template>
					</u--input>
				</u-form-item>
				<u-radio-group class='regIput' v-model="regParams.sex" size='20' placement="row">
					<u-radio style='margin-right: 20px;' v-for="(item, index) in radiolist" :key="index"
						:label="item.name" :name="item.value">
					</u-radio>
				</u-radio-group>
				<!-- 获取验证 -->
				<u-code :seconds="seconds" ref="uCode" 
						@change="codeChange"></u-code>

				<view class="btn" @click="submitForm">
					立即注册
				</view>
			</u--form>
		</view>
	</view>
</template>

<script>
	import {
		Logger
	} from 'sass';
	export default {

		data() {
			return {
				// 倒计时
				seconds: 30,
				tips: "",
				// 表单参数
				regParams: {
					userName: '',
					phone: '',
					password: '',
					sex: 1,
					code: ''
				},
				// 规则效验
				rules: {
					'userName': [{
						type: 'string',
						required: true,
						message: '请输入用户名',
						trigger: ['blur']
					}, ],
					'phone': [{
							type: 'number',
							required: true,
							message: '请输入手机号',
							trigger: ['blur']
						},
						// 正则判断手机号是否符合
						{
							pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,

							message: '输入11位手机号'
						},
					],
					'password': [{
							type: 'string',
							required: true,
							message: '请输入密码',
							trigger: ['blur']
						},
						// 正则判断密码是否符合
						{
							pattern: /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[\W_]).{6,}$/,

							message: '必须包含字母-数字-特殊符号组合不少于6位'
						},
					],
					'sex': [{
						type: 'boolean',
						required: true,
						message: '请输选择性别',
					}, ],
					'code': [{
						type: 'number',
						required: true,
						message: '请输入验证码',
						trigger: ['blur']
					}, ],

				},
				passType: 'password',
				showPassword: 'eye-fill',
				radiolist: [{
						name: '男',
						value: 1
					},
					{
						name: '女',
						value: 0
					},
				],


			};
		},

		methods: {
			eyeIcon() {
				if (this.showPassword == 'eye-fill') {
					this.showPassword = 'eye-off'
					this.passType = 'string'
				} else {
					this.showPassword = 'eye-fill'
					this.passType = 'password'
				}
			},
			// 提交表单
			 submitForm() {
				this.$refs.regForm.validate().then(res => {
					this.callAddUser(this.regParams)
					
				}).catch(e => {

				})
			},
			// 调用云函数 注册用户
			  async callAddUser(params) {
				let data = await uniCloud.callFunction({
					name: 'addUser',
					data: params
				})
				console.log(data)
			},
			//获取验证码
			getCode() {
				if(this.$refs.uCode.canGetCode) {
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						let code = ''
						for (var i = 0; i < 6; i++) {
							code += parseInt(Math.random() * 10)
						}
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
						this.regParams.code = code
					}, 2000);

				}
			},
			// 倒计时
			codeChange(text) {
				this.tips = text;
			},

		},
	}
</script>

<style lang="scss" scoped>
	.warp {
		flex-direction: column;
		display: flex;
		justify-content: center;
		width: 750rpx;
		height: 100vh;
		background-color: #f9f9f9;

		.title {
			font-size: 20px;
			font-weight: bold;
			width: 100%;
			line-height: 400rpx;
			text-align: center;
			height: 400rpx;
		}

		.form-warp {
			padding: 0 40px;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;

			.btn {
				margin-top: 100rpx;
				width: 700rpx;
				height: 90rpx;
				border-radius: 8rpx;
				background-color: #4bbaf5;
				text-align: center;
				line-height: 90rpx;
			}

			.getCode {
				font-size: 12rpx;
				color: #c0c4cc;
			}

			.regIput {
				height: 40px;
				margin-top: 5px;
			}
		}
	}
</style>
